<template>
    <div class="date-picker-end">
        <el-radio-group v-model="dateType">
            <el-radio :value="1" @click="reset">具体日期</el-radio>
            <el-radio :value="2" @click="setDefault">长期</el-radio>
        </el-radio-group>
        <div class="date-picker" v-if="dateType === 1">
            <el-date-picker style="flex:1" v-model="date" value-format="YYYY-MM-DD" placeholder="请选择" />
        </div>
    </div>
</template>

<script setup>
import { ref, computed,watch } from 'vue';
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
const emit = defineEmits(['update:modelValue']);
const dateType = ref(1);
const date = computed({
    get: () => props.modelValue,
    set: (val) => {
        emit('update:modelValue', val);
    }
})
const setDefault = () => {
    emit('update:modelValue', '9999-12-31');
}
watch(()=>props.modelValue,(newV)=>{
    if(newV=='9999-12-31'){
        dateType.value=2;
    }
})
const reset = () => {
    emit('update:modelValue','');
}
</script>

<style lang="scss" scoped>
.date-picker-end {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;

    .date-picker {
        display: flex;
        flex: 1;
    }
}
</style>